<template>
  <div class="app-container">
    <zhezhao :is-show="isShow" />
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.auditStatus" clearable>
                <el-option
                  v-for="item in examineList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="10">
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="primary" @click="toRoutes('cardAdd')">添加银行卡</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="accountType" label="账户类型" align="center" width="105px">
          <template slot-scope="scope">
            {{ scope.row.accountType == 1 ? '对公账户' :'对私账户' }}
          </template>
        </el-table-column>
        <el-table-column prop="bankTitle" label="银行名称" align="center">
          <!-- <template slot-scope="scope">
            {{scope.row.cards.name}}
          </template> -->
        </el-table-column>
        <el-table-column prop="cardNo" label="银行卡号" align="center" width="170px"/>
        <el-table-column prop="accountTitle" label="持卡人/企业账户名称" align="center" width="105px"/>
        <el-table-column prop="identity" label="身份证号/社会信用代码" align="center" width="180px"/>
        <el-table-column prop="phone" label="手机号" align="center" width="120px"/>
        <el-table-column prop="createdAt" label="添加时间" align="center" />
        <el-table-column prop="auditStatus" label="审核状态" align="center" >
          <template slot-scope="scope">
            {{ scope.row.auditStatus | status }}
          </template>
        </el-table-column>
        <el-table-column prop="auditDesc" label="备注" align="center" width="125px"/>
        <el-table-column prop="updatedAt" label="审核通过时间" align="center" />
        <el-table-column label="操作" align="center" width="145px">
          <template slot-scope="scope">
             <el-button
              v-if="scope.row.accountType == 1 && scope.row.auditStatus ==0"
              type="text"
              size="mini"
              @click="checkMoney(scope.row.cardId,scope.row.flowId)"
            >填写打款金额</el-button>
            <el-button
              type="text"
              size="mini"
              @click="toRoute('cardInfo',scope.row.cardId)"
            >查看</el-button>
            <el-button
              v-if="scope.row.accountType == 1 && scope.row.auditStatus ==0"
              type="text"
              size="mini"
              @click="sendAmount(scope.row.cardId)"
            >重新打款</el-button>
            <el-button
              v-if="scope.row.auditStatus == 2"
              type="text"
              size="mini"
              @click="toRoute('cardEidt',scope.row.cardId)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.auditStatus == 1"
              type="text"
              size="mini"
              @click="changeStatus(scope.row.cardId)"
            >解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span class="care">* 银行卡最多可添加10个</span>
    <el-dialog
      v-if="dialogFormVisible"
      title="填写打款金额"
      :visible.sync="dialogFormVisible"
      width="25%"
      destroy-on-close
      center
      @close="clear"
      >
      <el-form :model="form1">
        <el-form-item label="您收到的打款金额" label-width="140px">
          <el-input v-model="form1.amount" />
        </el-form-item>
        <el-form-item>
          <span class="color">
            *我们会向贵单位的对公银行账户提交一笔1元以下的打款申请，请在收到款后回填打款金额完成绑定
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="checkAmount()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { untieCard, listBankCard, checkAmount,sendAmount } from '@/api/financeCard'
import zhezhao from '@/components/CreateMask/index'
// import commonFn from '@/utils/common'

export default {
  components: { zhezhao },
  filters: {
    status: function(val) {
      switch (val) {
        case 0:
          return '待审核'
          break
        case 1:
          return '审核成功'
          break
        case 2:
          return '审核驳回'
          break
        default:
          return '--'
          break
      }
    }
  },

  data() {
    return {
      tableLoading: false,
      dialogFormVisible: false,
      // 提交form
      form: {
        pageNum: 1,
        pageSize: 10,
        auditStatus: ''
      },
      form1: {
        amount: '',
        cardId: '',
        flowId: ''
      },
      examineList: [
        {
          name: '待审核',
          value: '0'
        },
        {
          name: '审核驳回',
          value: '2'
        },
        {
          name: '审核通过',
          value: '1'
        }
      ],
      isShow: false,
      tableData: []
      // // 分页
      // page_sizes: [10, 30, 50, 100],
      // page_totals: 60
    }
  },
  mounted() {
    this.getSource()
    this.getList()
  },
  methods: {
    // 路由跳转
    toRoutes(e, id) {
      if (this.tableData.length < 10) {
        const route = { name: e, query: { id: id }}
        this.$router.push(route)
      } else {
        this.$message({
          type: 'warning',
          message: '银行卡最多可添加10，您已达上限，请取消绑定后再添加'
        })
      }
    },
    // 路由跳转
    toRoute(e, id) {
      const route = { name: e, query: { id: id }}
      this.$router.push(route)
    },

    clear() {
      this.form1 = {
        amount: '',
        cardId: '',
        flowId: ''
      }
    },
    // 查询
    searchList() {
      this.getList(this.form)
    },
    // 列表数据获取
    getList() {
      this.tableLoading = true
      listBankCard(this.form)
        .then(res => {
          //  console.log(res.data)
          if (res.data.code == 0) {
            // console.log(res)
            this.tableData = res.data.data.list
            this.tableLoading = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 对公验证金额
    checkMoney(cardId, flowId) {
      this.form1.cardId = String(cardId)
      this.form1.flowId = flowId
      this.dialogFormVisible = true
    },
    checkAmount() {
      checkAmount(this.form1).then(res => {
        if (res.data.code == 0) {
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: '对公账户已绑定成功!'
          })
          this.getList()
        } else {
          this.$message({
            type: 'warning',
            message: '输入金额有误，请重新填写'
          })
          this.form1 = {
            amount: '',
            cardId: '',
            flowId: ''
          }
          this.dialogFormVisible = false
        }
      })
    },

    // 解绑
    changeStatus(id) {
      this.$confirm('解除绑定后将不可提现至此银行卡', '解绑银行卡', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        untieCard({ id: id }).then(res => {
          if (res.data.code == 0) {
            this.$message({
              type: 'success',
              message: '解绑成功!'
            })
            this.getList()
          }
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res.msg
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    sendAmount(cardId){
      this.$confirm('是否发起重新打款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendAmount({id:String(cardId)}).then(res=>{
            if(res.data.code==0){
              this.$message({
                type: 'success',
                message: '发送成功!'
              })
            }else{
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    // 获取审核状态
    getSource() {
      const source = sessionStorage.getItem('source')
      const status = sessionStorage.getItem('check_status')
      if (status == 3) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  }
}
</script>
<style scoped>
.app-container {
padding: 20px !important;
position: relative;
}
.color{
  display: block;
  width: 80%;
  margin: 10px auto;
  font-size: 14px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  color: red;
}
.care{
  display: block;
  /* position: absolute; */
  font-size: 14px;
  color: red;
  margin: 20px 30px;
}
</style>
